<template>
  <div>
    <Card :arr="list" />
    <!-- 图标 -->
    <Mychart :data="datas" />
  </div>
</template>

<script>
import Card from './components/card.vue'
import Mychart from './components/MyChart.vue'
// 引入图标

import { getDushData } from '../../api/charts'
export default {
  components: {
    Card,
    Mychart
  },
  data() {
    return {
      list: [
        {
          id: 1,
          title: '总订单',
          count: '',
          icon: 'icon-wenjian',
          color: '#1296db',
          name: 'totalAmount'
        },
        {
          id: 2,
          title: '总销售额',
          count: '',
          icon: 'icon-Dollar',
          color: '#d4237a',
          name: 'totalOrder'
        },
        {
          id: 3,
          title: '今日订单',
          count: '',
          icon: 'icon-icon-',
          color: '#1296db',
          name: 'todayOrder'
        },
        {
          id: 4,
          title: '今日销售额',
          count: '',
          icon: 'icon-renminbi',
          color: '#1afa29',
          name: 'totayAmount'
        }
      ],
      datas: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const data = await getDushData()
      // console.log(data)
      this.datas = data
      this.list.forEach(item => {
        item.count = this.thousands(data[item.name])
      })
    },
    // 每三位数加一个逗号
    thousands(num) {
      var str = num.toString()
      var reg =
        str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
      return str.replace(reg, '$1,')
    }
  }
}
</script>

<style lang="less" scoped></style>
